<template>
	<el-container>
		<el-aside width="200px" v-loading="showGrouploading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="sortDialog" class="menu" node-key="sortId" :data="sortDialogList" :props="groupsProps" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false"
							 :filter-node-method="groupFilterNode" @node-click="groupClick">
						<template #default="{node, data}">
							<span class="custom-tree-node">
								<span class="label">{{ node.label }}</span>
								<span class="code">{{ data.code }}</span>
							</span>
						</template>
					</el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-col v-if="templateList.length==0">
				<el-empty description="目录下没模版" :image-size="100"></el-empty>
			</el-col>
			<el-main>
				<el-row :gutter="15">
					<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in templateList" :key="item.manageId">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="code-item">
								<div class="img" :style="`background-image: -webkit-linear-gradient(top left, #fff, ${item.color} 100px)`" @click="doExcelReport(item)">
									<h2 style="color: white">{{ item.title }}</h2>
								</div>
								<div class="title">
									<div style="text-align: left;padding-left: 10px;margin-top: 5px;width:50%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ item.sortName }}</div>
									<div style="text-align: right;padding-right: 10px;margin-top: 5px;width:50%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
										<el-icon>
											<el-icon-clock/>
										</el-icon>
										{{ item.beginTime }}~{{ item.endTime }}
									</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
export default {
	name: 'Excel Sort Filling',
	components: {},
	data() {
		return {
			dialog: {
				save: false,
			},
			showGrouploading: false,
			groupFilterText: '',
			templateList: [],
			sortDialogList: [],
			groupsProps: {
				label: "name",
				value: "sortId"
			},
			search: {
				biExcelSort: ''
			}
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.sortDialog.filter(val);
		}
	},
	mounted() {
		this.getBiExcelSortTree();
		this.getMyBiExcelManageList();
	},
	methods: {
		doExcelReport(item) {
			window.open("/#/bi/excel/create/fillexcel?manageId="+item.manageId+"&ddtab=true")
		},
		//加载树数据
		async getBiExcelSortTree() {
			this.showGrouploading = true;
			var res = await this.$API.bi.excel.getBiExcelSortTree.get();
			this.showGrouploading = false;
			this.sortDialogList = res.data;
		},
		async getMyBiExcelManageList() {
			var res = await this.$API.bi.excel.getMyBiExcelManageList.get({biExcelSort: this.search.biExcelSort});
			if (res.code == '200') {
				this.templateList = res.data;
			}
		},
		//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.sortName.indexOf(value) !== -1;
		},
		//树点击事件
		groupClick(data) {
			this.search.biExcelSort = data.sortId
			this.getMyBiExcelManageList();
		},
		//本地更新数据
		handleSuccess(data, mode) {
			this.$refs.table.refresh();

		},
		upsearch() {
			this.$refs.table.upData(this.search)
		},
	}
}
</script>
<style scoped>
.custom-tree-node {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	margin-left: 10px;
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	margin-left: 10px;
	display: inline-block;
}

.el-card {
	margin-bottom: 15px;
}

.code-item {
	cursor: pointer;
}

.code-item .img {
	width: 100%;
	height: 100px;
	background: linear-gradient(to right, #409eff, #f56c6c);
	display: flex;
	align-items: center;
	justify-content: center;
}

.code-item .img i {
	font-size: 100px;
	color: #fff;
	background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.code-item .title {
	padding: 5px;
	display: flex;
	margin-top: 5px;
	margin-bottom: 10px;
}

.code-item .title h4 {
	font-size: 12px;
	color: #999;
	font-weight: normal;
	margin-top: 5px;
}
</style>
